<template>
  <div class="account-side">
    <div class="nav">
      <ul class="nav-list">
        <li v-for="(item,index) in pageList"
            :key="index"
            class="list-item"
            @click="switchPage($event)">
          <span class="iconfont"
                :class="`icon-${item.icon}`"></span>
          <span class="title">{{item.title}}</span>
        </li>
        <li class="list-item"
            @click="deleteHandle">
          <span class="iconfont">&#xe781;</span>
          <span class="title">注销账号</span>
        </li>
      </ul>
    </div>
    <div class="toggle"
         @click="toggleActive($event)"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { deleteUser } from '@/api/user'
export default {
  data () {
    return {
      pageList: [{
        icon: 'user',
        title: '修改个人信息'
      }, {
        icon: 'smile',
        title: '查看头像'
      }, {
        icon: 'unlock',
        title: '修改密码'
      }]
    }
  },
  computed: {
    ...mapGetters(['userid'])
  },
  methods: {
    switchPage (event) {
      const el = event.currentTarget
      this.$emit('page', el.querySelector('.title').innerText)
    },
    toggleActive (event) {
      const nav = document.querySelector('.nav')
      const el = event.currentTarget
      el.classList.toggle('active')
      nav.classList.toggle('active')
    },
    deleteHandle () {
      this.$confirm('注销操作不可逆，将清空所有数据，是否继续？', '警告', {
        type: 'warning'
      }).then(() => {
        deleteUser(this.userid)
          .then((res) => {
            this.$notify.success({
              title: '成功',
              message: '注销成功',
              position: 'bottom-right'
            })
            this.$router.push('login')
          })
          .catch((err) => {
            this.$notify.error({
              title: '错误',
              message: err,
              position: 'bottom-right'
            })
          })
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'

.account-side
  position relative
  .nav
    position relative
    width 155px
    height 300px
    overflow hidden
    border-radius 6px
    box-shadow 0 5px 15px rgba(0, 0, 0, 0.2)
    transition 0.5s
    &.active
      width 50px
    .nav-list
      position absolute
      top 0
      left 0
      width 100%
      .list-item
        position relative
        display flex
        flex-direction row
        width 100%
        height 50px
        line-height 50px
        font-weight bold
        cursor pointer
        &:hover
          background-color rgba(#efefef, 0.6)
          .title, .iconfont
            color color-normal
        &:last-child:hover
          .title, .iconfont
            color color-red
        .iconfont
          position relative
          display block
          min-width 50px
          font-size 18px
          color #666
          text-align center
        .title
          position relative
          color #666
          white-space nowrap
          overflow hidden
  .toggle
    position absolute
    top calc(50% - 15px)
    right -15px
    width 30px
    height 30px
    background-color #fff
    border 4px solid #efefef
    cursor pointer
    border-radius 50%
    box-sizing border-box
    &::before
      content '\e766'
      font-family 'iconfont'
      position absolute
      width 100%
      height 100%
      font-size 24px
      line-height 20px
      text-align center
      color #666
    &.active::before
      content '\e765'
</style>
